<script lang="ts" setup>
import type { WorkbenchQuickNavItem } from '@vben/common-ui';

import { useRouter } from 'vue-router';

import { WorkbenchHeader, WorkbenchQuickNav } from '@vben/common-ui';

// import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import { message } from 'ant-design-vue';

const userStore = useUserStore();

const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'svg:card',
    title: '入料开单',
    url: '/inoutmanage/order?type=in',
  },
  {
    color: '#1fdaca',
    icon: 'svg:avatar-1',
    title: '出库开单',
    url: '/inoutmanage/order?type=out',
  },
  {
    color: '#1fdaca',
    icon: 'svg:bell',
    title: '销货开单',
    url: '/inoutmanage/order?type=sale',
  },
  {
    color: '#1fdaca',
    icon: 'svg:avatar-2',
    title: '结价开单',
    url: '/inoutmanage/order?type=price',
  },
  {
    color: '#1fdaca',
    icon: 'svg:avatar-3',
    title: '铂钯熔测',
  },
  {
    color: '#1fdaca',
    icon: 'svg:avatar-4',
    title: '铂钯结价',
    url: '/inoutmanage/order?type=boba',
  },
];

const router = useRouter();

// const todoItems = ref<WorkbenchTodoItem[]>([
//   {
//     completed: false,
//     content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
//     date: '2024-07-30 11:00:00',
//     title: '审查前端代码提交',
//   },
// ]);

function navTo(nav: WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    const [path, query] = nav.url.split('?');
    // console.log('path', path, query, Object.fromEntries(new URLSearchParams(query)));
    router
      .push({
        path,
        query: Object.fromEntries(new URLSearchParams(query)),
      })
      .catch((error: any) => {
        console.error('Navigation failed:', error);
      });
  } else {
    message.warning('功能开发中...');
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader :avatar="userStore.userInfo?.avatar || ''">
      <template #title>
        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
      </template>
      <!-- <template #description> 今日晴，20℃ - 32℃！ </template> -->
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col gap-4 lg:flex-col">
      <div class="mr-4 w-full">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mb-5 lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
      </div>
      <!-- <div class="w-full">
        <WorkbenchTodo :items="todoItems" title="待办事项" />
      </div> -->
    </div>
  </div>
</template>
